/**
 * 功能描述: 全局提示样式表
 * @author 崔孝楠
 * @date 2022/10/6 19:12
 * @version 1.0
 */
@import '../../style/index.scss';

// message整体布局
@mixin message--layout {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: $line-height-base;
  position: fixed;
  top: 8px;
  left: 0;
  z-index: $index-top;
  width: 100%;
}

// 提示内容布局
@mixin message-content--layout {
  display: inline-block;
  padding: 10px 16px;
}

// message整体样式
@include b(message) {
  color: $font-color-base;
  font-size: $font-size-base;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  pointer-events: none;
  @include message--layout;
}

// 提示信息布局
@include b(message-notice) {
  padding: 8px;
  text-align: center;
}

// 提示内容样式
@include b(message-content) {
  background: $color-white;
  border-radius: $border-radius-base;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  pointer-events: all;
  @include message-content--layout;
}

// 成功提示图标颜色
@include b(message-success) {
  @include b(message-icon) {
    color: $success-icon-color;
  }
}

// 错误提示图标颜色
@include b(message-error) {
  @include b(message-icon) {
    color: $error-icon-color;
  }
}

// 警告提示图标颜色
@include b(message-warning) {
  @include b(message-icon) {
    color: $warning-icon-color;
  }
}

// 信息提示图标颜色
@include b(message-info) {
  @include b(message-icon) {
    color: $info-icon-color;
  }
}

// 图标布局
@include b(message-icon) {
  position: relative;
  top: 1px;
  margin-right: 8px;
  width: 1em;
  height: 1em;
}

// message 离场过渡动画
.#{$namespace}-message-notice.#{$namespace}-move-up-leave {
  -webkit-animation-name: MessageMoveOut;
  animation-name: MessageMoveOut;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}
// 离场动画
@-webkit-keyframes MessageMoveOut {
  0% {
    max-height: 150px;
    padding: 8px;
    opacity: 1;
  }
  100% {
    max-height: 0;
    padding: 0;
    opacity: 0;
  }
}
// 离场动画
@keyframes MessageMoveOut {
  0% {
    max-height: 150px;
    padding: 8px;
    opacity: 1;
  }
  100% {
    max-height: 0;
    padding: 0;
    opacity: 0;
  }
}
